<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>抽奖大转盘</title>
    <link href="__STATIC__/luckdraw/css/mui.min.css" rel="stylesheet"/>
    <link href="__STATIC__/luckdraw/css/component.css" rel="stylesheet" type="text/css">
    <link href="__STATIC__/luckdraw/css/award.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="__STATIC__/luckdraw/css/animate.min.css"/>
    <style>
        /*顶部*/
        .header {
            height: 40px;
            background: #015198;
            color: #fff;
            line-height: 40px;
            position: fixed;
            width: 100%;
            font-size: 14px;
            z-index: 10000;
        }

        .header .header_l {
            padding-left: 3%;
            width: 12%;
            display: block;
            float: left;
        }

        .header .header_c {
            text-align: center;
            width: 70%;
            display: block;
            float: left;
        }

        .header .header_r {
            text-align: right;
            width: 12%;
            display: block;
            float: left;
        }

        .header i {
            font-size: 20px;
            line-height: 40px;
            color: #fff;
        }

        .ml-main {
            top: 40px;
        }

        .jp-div {
            width: 90%;
            position: absolute;
            top: 52vw;
            z-index: 3;
            left: 5vw;
        }

        .jp-div-l {
            border-width: 0px;
            width: 30%;
            background: #ca1518;
            color: white;
            border-radius: 5px;
            height: 35px;
            float: left;
            text-align: center;
            line-height: 35px;
            font-size: 15px;
            box-shadow: 0px 0px 1px 1px #ddd;
        }

        .jp-div-r {
            border-width: 0px;
            width: 30%;
            background: #ca1518;
            color: white;
            border-radius: 5px;
            height: 35px;
            float: right;
            text-align: center;
            line-height: 35px;
            font-size: 15px;
            box-shadow: 0px 0px 1px 1px #ddd;
        }
    </style>
</head>
<header class="header" style="background:#DF1D02;">
    <span class="header_l"><a href="#" style="background-color: unset;padding: unset"><i
            class="fa fa-chevron-left"></i></a></span>
    <span class="header_c">抽奖</span>
    <span class="header_r"><a href="#" style="background-color: unset;padding: unset"><i
            class="fa fa-user"></i></a></span>
</header>
<body>
<!--存储当前用户UID-->
<input type="hidden" name="user_id" id="user_id" value="{$user['user_id']|default=0}"/>
<!--存储当前用户的积分-->
<input type="hidden" name="points" id="points" value="{$user['points']|default=0}"/>
<input type="hidden" name="cj_min_num" id="cj_min_num" value="{$lot_rate['cj_min_num']}"/>
<input type="hidden" name="cj_shengyu" id="cj_shengyu" value="{$lot_rate['cj_shengyu']}"/>

<!-------------抽奖页面-------------->
<div class="ml-main" id="ml-main">
    <img class="main_back" src="__STATIC__/luckdraw/img/back.png"/>
    <img class="animated zoomIn img_2_1" src="__STATIC__/luckdraw/img/img_1.png">
    <img class="animated bounceIn img_2_2" src="__STATIC__/luckdraw/img/img_2.png">
    <div class="jp-div">
        <div class="jp-div-l" id="jiang">奖品明细</div>
        <div class="jp-div-r"><a href="{:url('logs')}" style="color: white">抽奖记录</a></div>
    </div>
    <div class="kePublic">
        <!--转盘效果开始-->
        <div style="margin:0 auto">
            <div class="banner">
                <div class="turnplate"
                     style="background-image:url('__STATIC__/luckdraw/img/turnplate-bg_2.png');background-size:100% 100%;">
                    <canvas class="item" id="wheelcanvas" width="516" height="516"></canvas>
                    <img id="tupBtn" class="pointer" src="__STATIC__/luckdraw/img/turnplate-pointer_2.png"/>
                </div>
            </div>
        </div>
        <!--转盘效果结束-->
        <div class="clear"></div>
    </div>
    <img class="bottom_shadow" src="__STATIC__/luckdraw/img/bottom_shadow.png"/>
    <img class="animated zoomIn kePublic_back" src="__STATIC__/luckdraw/img/back1.png"/>

    <!--------------滚动中奖纪录---------------->
    <div class="record_line" id="Marquee">
        {foreach name="record_line" item="item"}
            <div id="">
                恭喜 {$item.username} 的用户抽中 <span id="gift_coupon">{$item.price}</span>
            </div>
        {/foreach}

    </div>
    <!-------------底部声明-------------->
    <img class="rule_title" src="__STATIC__/luckdraw/img/rule_title.png"/>
    <div class="rule_text">
        <strong>当前我的积分{$user['points']}，{$lot_rate['cj_min_num']}积分可以抽奖一次。</strong><br>
    </div>


</div>

<!-------------中奖弹窗页面-------------->
<div class="zj-main" id="zj-main">
    <div class="txzl">
        <div class="zj_text">
            中奖啦<br>恭喜获得<span id="jiangpin"></span><br>可在抽奖记录中查看
        </div>
        <div class="close_zj">关闭</div>
    </div>
</div>

<!-------------谢谢参与弹窗-------------->
<div class="xxcy-main" id="xxcy-main">
    <div class="xxcy">
        <div class="xxcy_text">
            很遗憾<br>没有抽中礼品
        </div>
        <div class="close_xxcy">关闭</div>
    </div>
</div>
<script type="text/javascript" src="{:url('getPrizerate')}"></script>
<script type="text/javascript" src="{:url('getPrizeinfo')}"></script>
<script type="text/javascript" src="__STATIC__/luckdraw/js/jquery.min.js"></script>
<script type="text/javascript" src="__STATIC__/luckdraw/js/mui.min.js"></script>
<script type="text/javascript" src="__STATIC__/luckdraw/js/awardRotate.js"></script>
<script type="text/javascript" src="__STATIC__/luckdraw/js/award.js"></script>
<script type="text/javascript">

    $('#jiang').click(function () {
        //获取奖品明细内容
        $.ajax({
            type: "get",
            url: "{:url('getPrizetext')}",
            success: function (res) {
                $(".xxcy_text").html(res);
                $("#xxcy-main").fadeIn();
                return false;
            }
        });
    });

    $(function () {
        $("img").on("click", function () {
            return false;
        });
        document.addEventListener("WeixinJSBridgeReady", function () {
            WeixinJSBridge.call('hideOptionMenu');
        });
    });
</script>

</body>
</html>
